<template>
	<view class="agency">
		<!-- 列表 -->
		<view class="agency-item" v-for="(item, index) in list" :key="index" @click="bindDetail(item.id, 4)">
			<!-- 左边部分 -->
			<view class="agency-item-left"><image :src="item.cover ? item.cover : IMG_URL + item.imgs[0].img_url" mode="aspectFill"></image></view>
			<!-- 右边部分 -->
			<view class="agency-item-right">
				<view class="ai-top">
					<view class="name">{{ item.cname }}</view>
					<view class="character">{{ item.temper }}</view>
				</view>
				<view class="ai-bottom">
					<view class="agent_price">
						分享￥
						<text>{{ item.agent_price }}</text>
					</view>
					<view class="price_diff">
						相比游客分享可多获得
						<text>￥{{ item.price_diff }}</text>
						元佣金
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import { xAgentls } from '@/api/index.js';
const app = getApp();
export default {
	data() {
		return {
			IMG_URL: app.globalData.IMG_URL,
			openid: '',
			page: 1,
			status: 'loading',
			list: [],
			total: 0 //总页数
		};
	},
	methods: {
		// 获取列表
		async xAgentls() {
			this.status = 'loading';
			const res = await xAgentls({
				openid: this.openid,
				page: this.page
			});
			this.list = this.list.concat(res.list);
			this.total = res.total;
			this.status = 'more';
			if (res.total == 0) {
				this.status = 'noMore';
			}
		},
		// 跳转详情
		bindDetail(id, type) {
			uni.navigateTo({
				url: `/pages/buyDetail/buyDetail?id=${id}&type=${type}`
			});
		}
	},
	onLoad() {
		this.openid = uni.getStorageSync('openid');
		this.xAgentls();
	},
	// 分页
	onReachBottom() {
		if (this.total == this.page) {
			this.status = 'noMore';
			return false;
		}
		this.page++;
		this.xAgentls();
	}
};
</script>

<style scoped lang="scss">
.agency {
	padding: 24rpx 30rpx;
	.agency-item {
		width: 100%;
		height: 256rpx;
		display: flex;
		margin-bottom: 40rpx;
		.agency-item-left {
			width: 256rpx;
			height: 256rpx;
			margin-right: 28rpx;
			& > image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
		.agency-item-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.ai-top {
				.name {
					font-size: 32rpx;
					font-weight: 600;
					color: #171717;
					margin-bottom: 8rpx;
				}
				.character {
					width: 68rpx;
					height: 32rpx;
					text-align: center;
					line-height: 32rpx;
					background: rgba(153, 153, 153, 0.15);
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}
			.ai-bottom {
				.agent_price {
					font-size: 20rpx;
					font-weight: 500;
					color: #fa8384;
					letter-spacing: 2rpx;
					margin-bottom: 8rpx;
					& > text {
						font-size: 44rpx;
						font-weight: bold;
					}
				}
				.price_diff {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					& > text {
						color: #666666;
						font-weight: bold;
					}
				}
			}
		}
	}
}
</style>
